<template>
  <div class="py-4 container-fluid">
    <div class="row my-4">
      <div class="col-lg-8 col-md-6 mb-md-0 mb-4">
        <projects-card style="height:100%"/>
      </div>
      <div class="col-lg-4 col-md-6">
        <rent-card />
      </div>
    </div>
    <div class="row">
      <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
        <mini-statistics-card
          title="订单总值"
          value="$18,230"
          :percentage="{
            value: '+505%',
            color: 'text-success',
          }"
          :icon="{
            component: 'ni ni-money-coins',
            background: iconBackground,
          }"
          direction-reverse
        />
      </div>
      <div class="col-xl-3 col-sm-6 mb-xl-0">
        <mini-statistics-card
          title="生产中的订单"
          value="819"
          :percentage="{
            value: '+5%',
            color: 'text-success',
          }"
          :icon="{
            component: 'ni ni-cart',
            background: iconBackground,
          }"
          direction-reverse
        />
      </div>
      <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
        <mini-statistics-card
          title="已完成订单"
          value="119"
          :percentage="{
            value: '+3%',
            color: 'text-success',
          }"
          :icon="{
            component: ' ni ni-world',
            background: iconBackground,
          }"
          direction-reverse
        />
      </div>
      <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
        <mini-statistics-card
          title="逾期订单"
          value="21"
          :percentage="{
            value: '-2%',
            color: 'text-danger',
          }"
          :icon="{
            component: 'ni ni-paper-diploma',
            background: iconBackground,
          }"
          direction-reverse
        />
      </div>
      
    </div>
    <div class="row" style="margin-top:20px">
      
      <div class="col-lg-5">
        <div class="card h-100">
          <div
            class="overflow-hidden position-relative border-radius-lg bg-cover h-100"
            style="
              background-image: url('https://demos.creative-tim.com/soft-ui-dashboard/assets/img/ivancik.jpg');
            "
          >
            <span class="mask bg-gradient-dark"></span>
            <div class="card-body position-relative z-index-1 p-3 h-100">
              <div class="d-flex flex-column h-100">
                <h5 class="text-white font-weight-bolder mb-4 pt-2">
                  告示
                </h5>
                <p class="text-white mb-5">
                  本公司将终止与工厂0981的合作。这家工厂来骗、来敲诈，逾期190份订单，带着订金直接跑路，不讲武德，欺骗我29年的老公司，这种行为实在令人唾弃。
                </p>
                <p class="text-white mb-5">
                  为减轻员工负担以及调整员工状态，经股东商议，决定于下周（即2022.01.09-2022.01.16）实行公司全体员工带薪休假一周的政策，望周知。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-7 mb-lg-0 mb-4">
        <div class="card">
          <div class="card-body p-3" style="padding:1.7rem">
            <div class="row">
              
              <div class="col-lg-5 ms-auto text-center mt-5 mt-lg-0">
                <div class="bg-gradient-success border-radius-lg h-100">
                  <img
                    src="@/assets/img/shapes/waves-white.svg"
                    class="position-absolute h-100 w-50 top-0 d-lg-block d-none"
                    alt="waves"
                  />
                  <div
                    class="position-relative d-flex align-items-center justify-content-center h-100"
                  >
                    <img
                      class="w-100 position-relative z-index-2 pt-4"
                      src="@/assets/img/illustrations/rocket-white.png"
                      alt="rocket"
                    />
                  </div>
                </div>
              </div>
              <div class="col-lg-7">
                <div class="d-flex flex-column h-100"  style="height:100%">
                  <h5 class="font-weight-bolder">热带风味冰红茶公司</h5>
                  <p class="mb-1 pt-2 text-bold"></p><p class="mb-1 pt-2 text-bold">先进个人公示：</p>
                  <p class="mb-5">
                    根据人力资源部要求，经逐级推荐评选、全公司匿名投票以及推选先进个人评选表彰领导小组办公室审核，拟表彰公司选标部员工夏先进为先进个人。为切实体现公开、公平、公正原则，充分发扬民主，广泛听取意见，主动接受监督，特此予以公示。
                  </p>
                 
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import MiniStatisticsCard from "./components/MiniStatisticsCard.vue";
import ProjectsCard from "./components/ProjectsCard.vue";
import {
  faHandPointer,
  faUsers,
  faCreditCard,
  faScrewdriverWrench,
} from "@fortawesome/free-solid-svg-icons";
import RentCard from './components/RentCard.vue';
export default {
  name: "Efficiency",
  data() {
    return {
      iconBackground: "bg-gradient-success",
      faCreditCard,
      faScrewdriverWrench,
      faUsers,
      faHandPointer,
      
    };
  },
  components: {
    MiniStatisticsCard,
    ProjectsCard,
    RentCard
  },
};
</script>
<style scoped>
.card{
  height:100%;
}
</style>